<template>
  <div class="withdrawal">
    <div class="body_input">
      <div>
        <div class="user_title">真实姓名</div>
        <div class="user_name">
          <input
            type="text"
            placeholder="请输入开户人姓名"
            v-model="UserInformation.realname"
            maxlength="8"
            disabled
          />
        </div>
      </div>
    </div>
    <div class="body_input">
      <div>
        <div class="user_title">身份证号</div>
        <div class="user_name">
          <input
            type="text"
            placeholder="请输入身份证号"
            v-model="UserInformation.cardId"
            disabled
          />
        </div>
      </div>
    </div>

    <div class="body_input">
      <div class="BankAddress">
        <div class="user_title"><span>*</span>银行卡号</div>
        <div class="user_name">
          <input
            type="number"
            v-if="cardNum_fa"
            placeholder="请输入银行卡号"
            v-model="cardNum"
            @blur="cardNum_"
          />
          <input type="number" v-else :placeholder="opening_bank" disabled />
          <span
            v-if="!opening_bank_is"
            :class="!opening_bank_is ? 'isback_hong' : ''"
            >{{ opening_bank_ }}</span
          >
          <div v-if="!cardNum_fa" id="img_close" @click="close_img">
            <img src="../../public/img/other/cha2.jpg" alt="" />
          </div>
          <input
            type="text"
            v-if="ManualInput"
            placeholder="识别失败请手动输入银行名称"
            v-model="opening_bank_.bank"
          />
        </div>
      </div>
    </div>
    <!-- 6226222710316592 -->
    <!-- <div class="body_input">
      <div>
        <div class="user_title"><span>*</span>开户银行</div>
        <div class="user_name">
          <input type="text" placeholder="输入银行卡号自动识别" v-model="opening_bank_" readonly="readonly" />
        </div>
      </div>
    </div> -->
    <div class="body_input">
      <div>
        <div class="user_title"><span>*</span>开户支行</div>
        <div class="user_name">
          <input
            type="text"
            placeholder="请输入开户行"
            v-model="qs_opening_bank"
            maxlength="30"
          />
        </div>
      </div>
    </div>
    <div class="body_input">
      <div>
        <div class="user_title"><span>*</span>手机号码</div>
        <div class="user_name">
          <input
            type="number"
            placeholder="请输入手机号"
            v-model="cellPhonenumber"
            @blur="isPhone(cellPhonenumber)"
          />
        </div>
      </div>
    </div>

    <div class="body_input">
      <div>
        <div class="user_title">支付宝号</div>
        <div class="user_name">
          <input
            type="number"
            placeholder="请输入支付宝号"
            v-model="AlipayNumber"
          />
        </div>
      </div>
    </div>

    <van-dialog
      class="input_back"
      v-model="mpdel_map"
      :title="title_qs"
      show-cancel-button
      @confirm="model_queding"
    >
      <input
        type="text"
        placeholder="请输入开户行名称"
        v-model="opening_bank"
      />
      <div class="text_map">如：中国建设银行香港中路支行</div>
    </van-dialog>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-area
        title="请选择开户地点"
        :area-list="areaList"
        :columns-num="2"
        @confirm="confirm($event)"
        @cancel="show = false"
      />
    </van-popup>

    <div
      class="withdrawal_btn"
      :class="color_blue ? 'color_blue withdrawal_btn' : 'withdrawal_btn'"
      @click.stop="okAddCardClick"
    >
      确认绑卡
    </div>

    <div class="beCareful">
      <span>注意：</span>
      <span>1. 提现资料请勿随意填写，需正确填写以上资料。</span>
      <span
        >2. 银行卡、身份证号码必须与提现人真实姓名一致，否则提现不能到账。</span
      >
      <span>3. 请勿将账号绑定他人的姓名和卡号，绑定后不能修改。</span>
    </div>
    <!-- <div class="result">
      <u>积分规则说明</u>
    </div> -->
    <div>{{ exitsVal }}</div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import "../../assets/jquery-3.4.1.js";
import "../../assets/jquery-3.4.1.min.js";
import md5 from "js-md5";
import qs from "qs";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      name: "", //开户人
      cardNum: "", //银行卡号
      opening_bank: "", //开户行
      province_name: "", //开户省份地点
      city_name: "", //开户城市地点
      IDnumber: "", //身份证号
      cellPhonenumber: "", //手机号
      AlipayNumber: "", //支付宝号
      areaList: areaList,
      code_map: "",
      show: false,
      mpdel_map: false,
      _model: "",
      title_qs: "",
      opening_bank_: "",
      qs_opening_bank: "",
      opening_bank_is: false,
      ifExist: "",
      color_blue: false, //颜色
      UserInformation: {}, //开局获取的用户信息
      cardNum_fa: true, //离开银行卡能否操作
      ManualInput: false, //是否需要手动输入
      // ManualInput_: "", //手动输入的值
      userId: "",
      token: "",
    };
  },
  computed: {
    exitsVal: function () {
      this.ifExist =
        Number(Boolean(this.cardNum)) +
        Number(Boolean(this.opening_bank_is)) +
        Number(Boolean(this.opening_bank_.bank)) +
        Number(Boolean(this.$.isPhone(this.cellPhonenumber)));
    },
  },
  watch: {
    // cardNum: {
    //   handler: function () {
    //     if (!this.cardNum) {
    //       this.opening_bank_ = "";
    //     }
    //   },
    //   deep: true,
    // },
    cellPhonenumber(newVal) {
      //  console.log(newVal.length);
    },
    ifExist(newVal, oldVal) {
      if (Number(newVal) === 4) {
        this.color_blue = true;
      } else {
        this.color_blue = false;
      }
    },
  },
  created() {
    this.$store.commit("empty");
    let token = this.$.getCookie("token");
    if (!token) {
      this.$store.commit("change", "/withdrawal_new");
      this.$router.push("/login");
    }
    let userId = this.$.getCookie("userId");
    this.userId = userId;
    this.token = token;
    this.withdrawText(); //获取用户信息
  },
  methods: {
    model_queding() {
      this.qs_opening_bank =
        this.province_name + " " + this.city_name + " " + this.opening_bank;
    },
    close_img() {
      this.cardNum_fa = !this.cardNum_fa;
    },
    cardNum_() {
      if (!this.cardNum) {
        return Toast("银行卡号不能为空");
      }
      let arys = {
        userId: this.userId,
        token: this.token,
        cardNum: this.cardNum,
      }; //参数
      let url = "/user/getbankname";
      this.$.encryption2(arys, url).then((res) => {
        if (res.data.status === 0) {
          if (res.data.result.bank) {
            this.ManualInput = false;
            // console.log(res.data.result);
          } else {
            this.ManualInput = true;
          }
            this.cardNum_fa = false;
            this.opening_bank_is = true;
            this.opening_bank_ = res.data.result;
            let str = "";
            str = +this.cardNum.substring(this.cardNum.length - 4);
            this.opening_bank = res.data.result.bank + "(尾号" + str + ")";
        } else {
          if (res.data.result.bank) {
            this.ManualInput = true;
          } else {
            this.opening_bank_is = false;
            this.opening_bank_ = res.data.text;
          }
        }
      });
    },
    isPhone(value) {
      if (!this.$.isPhone(value)) {
        Toast("手机号格式不正确");
      }
    },
    showPopup() {
      this.show = true;
    },
    confirm(e) {
      // console.log(e);
      this.province_name = e[0].name;
      this.city_name = e[1].name;
      this.title_qs = `${e[0].name}--${e[1].name}`;
      this.mpdel_map = true;
      this.show = false;
    },
    withdrawText() {
      let arys = {
        userId: this.userId,
        token: this.token,
      }; //参数
      let url = "/user/withdrawText";
      this.$.encryption2(arys, url).then((res) => {
        if (res.data.status === 0) {
          this.UserInformation = res.data.result;
        } else {
          Toast(res.data.text);
        }
      });
    },
    okAddCardClick() {
      if (!this.color_blue) {
        return console.log("三个必传条件不成立");
      }
      if (!this.cardNum) {
        return Toast("银行卡号不能为空");
      }
      if (!this.opening_bank) {
        return Toast("开户地点不能为空");
      }
      if (!this.cellPhonenumber) {
        return Toast("手机号不能为空");
      }
      //添加成功银行卡
      let arys = {
        userId: this.userId,
        token: this.token,
        cardNum: this.cardNum,
        bank_name: this.opening_bank_.bank,
        opening_bank: this.qs_opening_bank,
        mobile: this.cellPhonenumber,
      }; //参数
      if (this.AlipayNumber) {
        arys.alipay_no = this.AlipayNumber;
      }
      let url = "";
      if (this.UserInformation.bankId) {
        url = "/user/editBankCard";
      } else {
        url = "/user/addBankCard";
      }
      this.$.encryption2(arys, url).then((res) => {
        if (res.data.status == 0) {
          Toast(res.data.text);
          this.$router.push("/withdrawal_new");
        } else {
          Toast(res.data.text);
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.withdrawal {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: rgba(249, 249, 249, 1);
  position: relative;
}

.withdrawal > .body_input:nth-of-type(1) {
  margin-top: 4vw;
}

.beCareful {
  width: 88vw;
  margin: 0 auto;
  margin-top: 4.2vw;
  display: flex;
  flex-direction: column;
}

.beCareful > span {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  font-size: 3.4vw;
  padding: 1.7vw;
}

.beCareful > span:nth-of-type(1) {
  font-size: 3.86vw;
}

.beCareful > span:nth-of-type(3) {
  color: #f10e0e;
}

.isback_hong {
  color: #f10e0e !important;
}

.result {
  width: 100vw;
  height: 10vw;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0vw;
  font-size: 2.9vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  align-items: center;
}

input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #aab2bd;
  /* placeholder字体大小  */
  font-size: 4vw;
  /* placeholder位置  */
  text-align: left;
  letter-spacing: 1px;
}

.input_::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #333;
  /* placeholder字体大小  */
  font-size: 4vw;
  /* placeholder位置  */
  text-align: left;
  letter-spacing: 1px;
}

.withdrawal .top_back {
  margin: 0 auto;
  margin-top: 15vw;
  margin-bottom: 17vw;
  width: 100%;
  text-align: center;
}

.withdrawal .top_back div:nth-of-type(1) {
  font-size: 5.5vw;
  color: #333333;
  line-height: 7.6vw;
  font-weight: 500;
}

.withdrawal .top_back div:nth-of-type(2) {
  margin-top: 3vw;
  font-size: 4.5vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 6vw;
}

.body_input {
  width: 88vw;
  margin-left: 5vw;
  font-size: 4vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 4.5vw;
  margin-bottom: 2.5vw;
}

.body_input div:nth-of-type(1) {
  display: flex;
  justify-content: flex-end;
}

.body_input div:nth-of-type(1) .user_name span {
  padding-left: 4vw;
  font-size: 3.86vw;
  color: #333333;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}

.user_title {
  width: 20vw;
  line-height: 12vw;
  font-weight: 500;
}

.user_title > span {
  color: #f10e0e;
}

.user_name {
  width: 68vw;
  text-align: left;
  border-bottom: 1px solid #f2f2f2;
  position: relative;

  #img_close > {
    position: absolute;
    width: 4vw;
    height: 4vw;
    top: 4vw;
    right: 0;
    border: 1px solid #8c8c8c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    img {
      width: 90%;
      height: 90%;
    }
  }
}

.user_name input {
  width: 100%;
  padding: 4vw 1vw 4vw 4vw;
  border: rgba(249, 249, 249, 1);
  background: rgba(249, 249, 249, 1);
}

.withdrawal_btn {
  width: 83.5vw;
  margin-left: 8.25vw;
  height: 13.3vw;
  line-height: 13.3vw;
  background: #d8d8d8;
  border-radius: 6.55vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  font-size: 4.5vw;
  text-align: center;
  margin-top: 9.6vw;
}

.color_blue {
  background: linear-gradient(135deg, #64d4ff 0%, #3072ff 100%, #3072ff 100%);
}

.input_back {
  width: 90%;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(249, 249, 249, 1);
  border-radius: 4.85vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  /* font-size: 3.2vw; */
}

.input_back input {
  padding: 1vw 4vw;
  width: 70vw;
  margin-top: 3vw;
  margin-left: 5vw;
  border: none;
  height: 9.7vw;
  line-height: 9.7vw;
  background: #efebeb;
  border-radius: 4.85vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-size: 3.9vw;
}

.text_map {
  width: 78%;
  /* margin: 0 auto; */
  padding: 4vw 6vw;
  color: #8c8c8c;
  font-size: 3.2vw;
  margin-bottom: 2vw;
}
</style>